<template>

  <t-form ref="form" class="base-form" :data="formData" :rules="API_RULES" label-align="left" :label-width="100"
    @submit="onSubmit">
    <t-form-item label="APPID">
      <t-input v-model="formData.appId" placeholder="请输入AI工具箱分配的appId"></t-input>
    </t-form-item>
    <t-form-item label="APPSECRET">
      <t-input v-model="formData.appSecret" placeholder="请输入AI工具箱分配的appSecret" type="password"></t-input>
    </t-form-item>
    <t-form-item label="API地址">
      <t-input v-model="formData.apiUrl" placeholder="请输入提供服务的API地址"></t-input>
    </t-form-item>

    <t-form-item label="跨域设置">
      <t-textarea v-model="formData.corsOrigin" placeholder="域名之间用逗号间隔" />
    </t-form-item>
    <div class="form-submit-container">
      <div class="form-submit-sub">
        <div class="form-submit-left">
          <t-button theme="primary" class="form-submit-confirm" type="submit"> 确认提交 </t-button>
          <t-button type="reset" class="form-submit-cancel" theme="default" variant="base" @click="onCancel"> 取消
          </t-button>
        </div>
      </div>
    </div>
  </t-form>
</template>

<script setup lang="ts">
  import {
    MessagePlugin
  } from 'tdesign-vue-next';
  import {
    ref, defineEmits
  } from 'vue';
  import {
    API_DATA,
    API_RULES
  } from './constants';
  import {getBaseConfig,saveBaseCofig} from '@/api/settings'

  const emits = defineEmits(['close'])
  const formData = ref({
    ...API_DATA
  });

  const onSubmit = ({validateResult,firstError}) => {
    if (validateResult === true) {
      saveData();
      MessagePlugin.success('己保存');
      emits('close')
    }
  };
  const onCancel = () => {
    MessagePlugin.error('己取消')
    emits('close')
  }
  const fetchData=()=>{
     getBaseConfig().then(ret=>{
       console.log('config ret',JSON.stringify(ret))
       formData.value=ret
     })
  }
  const saveData=()=>{
     saveBaseCofig(formData.value)
  }


fetchData()
</script>

<style>
</style>
